<template>
  <div>
    <header-slot></header-slot>
    <div class="box clearfix">
      <!-- 左 -->
      <div class="l-left">
        <div class="pic-box">
          <vue-photo-zoom-pro
            :url="formData.goodsImage"
            out-zoomer
            :mask="false"
            :zoomer-style="{ background: 'rgba(255, 165, 0, 0.4)' }"
            :out-zoomer-style="{ zIndex: 20 }"
            :width="303"
          >
            <template slot="zoomer">
              <div class="ks-imagezoom-wrap"></div> </template
          ></vue-photo-zoom-pro>
        </div>
      </div>
      <!-- 右 -->
      <div class="l-right">
        <div class="title">{{ formData.goodsName }}</div>
        <el-form ref="form" :model="formData" label-width="70px">
          <el-form-item label="价格" class="price">
            ￥{{ formData.goodsPrice }}
          </el-form-item>

          <el-form-item label="增值业务">
            <span class="yewu"
              ><i class="el-icon-refresh"></i> 高价回收，急速到账</span
            >
          </el-form-item>

          <el-form-item label="配 送 至">
            <select name="" id="">
              <option value="">四川成都市武侯区城区</option>
            </select>
            <span class="span"
              >有货 &nbsp;&nbsp;支持 <i>可配送港澳台</i><span>|</span
              ><a href="javascript:;">99元免基础运费</a></span
            >
          </el-form-item>
          <el-form-item
            plain
            :label="index"
            v-for="(item, index) in AttrList"
            :key="index"
            ref="btn"
          >
            <el-button
              v-for="(item1, index1) in item"
              :key="index1"
              @click="clicks(item1.specName, item1.pspecId, item1.specId)"
            >
              {{ item1.specName }}
            </el-button>
          </el-form-item>

          <el-form-item label="购买方式" class="price">
            <el-button plain class="red">官方标配</el-button>
          </el-form-item>
        </el-form>

        <div class="shop_box">
          <div class="number">
            <input type="number" v-model="number" />
            <a href="javascript:;" class="btn_add" @click="number++">+</a>
            <a href="javascript:;" class="btn_reduce" @click="number--">-</a>
          </div>
          <button class="shop" @click="addShopping">加入购物车</button>
        </div>
      </div>
    </div>
    <footer-slot></footer-slot>
  </div>
</template>
<script>
import headerSlot from "./header-slot";
import footerSlot from "./footer-slot";
export default {
  components: { headerSlot, footerSlot },
  data() {
    return {
      // 具体商品数据
      formData: {},
      // 商品规格数据
      AttrList: {},
      // 商品属性
      attribute: [],
      // 商品数量
      number: 1,
      skuId: "",
      specNames: "",
      specNames1: "",
      // 商品id
      goodsId: "",
      Id: "",
    };
  },
  mounted() {
    // sessionStorage.setItem("refresh", "1");

    // if (sessionStorage.getItem("refresh") != "1") {
    //   sessionStorage.setItem("refresh", "1");
    //   location.reload();
    // }
    this.goodsId = this.$route.query.goodsid;
    this.Id = this.$route.query.id;
    // 获取商品规格
    this.getAttrList();
    // 获取默认商品
    this.getDataBySkuId();
  },
  methods: {
    // 商品规格
    async getAttrList() {
      const { data: res } = await this.$axios.get(
        `/goods/getAttrList?goodsId=${this.goodsId}`
      );
      this.AttrList = res;
      this.$forceUpdate();
    },
    async getDataBySkuId() {
      // 商品属性
      const { data: res1 } = await this.$axios.post("/goods/findDataBySkuId", {
        id: this.Id,
      });
      this.attribute = res1.data;
      var skuid = "";
      for (let i = 0; i < res1.data.length; i++) {
        skuid += res1.data[i].pspecId + ";" + res1.data[i].specId + ",";
      }
      skuid = skuid.substr(0, skuid.length - 1);
      this.skuId = skuid;

      // 默认商品
      const { data: res } = await this.$axios.post(
        "/CommodityType/getDataBySkuId",
        {
          skuId: skuid,
          goodsId: this.goodsId,
        }
      );
      this.formData = res.data;
      this.$forceUpdate();
    },
    // 选择型号
    async clicks(val, id, sid) {
      var list = this.attribute;
      for (let i = 0; i < list.length; i++) {
        if (list[i].pspecId == id) {
          list[i].specName = val;
          list[i].specId = sid;
          this.changes();
        }
      }

      var str = "";
      for (let i = 0; i < list.length; i++) {
        str += list[i].pspecId + ";" + list[i].specId + ",";
      }
      str = str.substr(0, str.length - 1);
      this.skuId = str;

      const { data: res } = await this.$axios.post(
        "/CommodityType/getDataBySkuId",
        {
          skuId: str,
          goodsId: this.goodsId,
        }
      );
      this.formData = res.data;
      this.$forceUpdate();
    },
    // 当前选择型号
    changes() {
      var list = this.attribute;
      var obj = this.AttrList;
      for (const key in obj) {
        let arr = this.$refs.btn;
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].$el.children[0].innerText == key) {
            var arr1 = arr[i].$el.children[1].children;
            for (let j = 0; j < arr1.length; j++) {
              for (let k = 0; k < list.length; k++) {
                if (list[k].specName == arr1[j].innerText) {
                  arr1[j].style.borderColor = "red";
                  break;
                } else {
                  arr1[j].style.borderColor = "";
                }
              }
            }
          }
        }
      }
    },
    // 发送请求加入购物车
    addShopping() {
      if (sessionStorage.getItem("token") == 1) {
        this.$axios
          .post("/shopping/add", {
            userId: sessionStorage.getItem("userId"),
            goodsId: this.goodsId,
            skuId: this.formData.skuId,
            number: this.number,
          })
          .then((res) => {
            if (res.data.data == 1) {
              alert("添加购物车成功！");
            }
          });
      } else {
        alert("您还没有登录，请先登录！");
        this.$router.push({path:"/login", query:{url:"/commodityDetails"}});
      }
    },
  },
  watch: {
    number() {
      if (this.number <= 1) {
        this.number = 1;
      }
    },
    attribute() {
      var time = setInterval(() => {
        if (this.$refs.btn != undefined) {
          this.changes();
          clearInterval(time);
        }
      }, 100);
    },
  },
};
</script>
<style scoped>
.box {
  width: 1200px;
  margin: 0 auto;
  background-color: #fff;
}
.l-left {
  float: left;
  position: relative;
  width: 450px;
}
.l-right {
  float: right;
  width: 738px;
}
.title {
  font: 700 16px Arial, "microsoft yahei";
  color: #666;
  padding-top: 10px;
  line-height: 28px;
  margin-bottom: 5px;
}
.pic-box {
  /* position: relative; */
  width: 450px;
  height: 450px;
  border: 1px solid #ccc;
}
.price /deep/ .el-form-item__content {
  font-size: 22px;
  color: #e4393c;
}
.h50 {
  height: 50px;
}
.yewu {
  border: 1px solid #acafc5;
  border-radius: 9px;
  /* color: #acafc5; */
}
.yewu > i {
  display: inline-block;
  border-radius: 9px;
  background-color: #acafc5;
  color: #fff;
}
select {
  width: 150px;
  height: 25px;
  border: 1px solid #cecbce;
  font-size: 12px;
}
.span {
  font-size: 12px;
  color: #999;
}
.span > i {
  list-style: none;
  color: #646fb0;
  margin-left: 5px;
}
.span > span {
  padding: 0 8px;
  color: #eaeaea;
}
.span > a {
  color: #646fb0;
}
.span > a:hover {
  color: #e4393c;
}
.btns {
  display: inline-block;
  margin-right: 10px;
}
.red {
  border-color: #e4393c;
}
.shop_box {
  position: relative;
}
.number {
  display: inline-block;
  width: 58px;
  height: 44px;
  overflow: hidden;
  border: 1px solid #ccc;
  position: relative;
  margin-right: 10px;
}
.number > input {
  display: block;
  width: 43px;
  height: 42px;
  line-height: 42px;
  position: absolute;
  top: 1px;
  left: 0;
  border: none;
  border: 0;
  text-align: center;
}
.number > a {
  display: block;
  width: 15px;
  text-align: center;
  height: 22px;
  line-height: 22px;
  overflow: hidden;
  background: #f1f1f1;
  color: #666;
  position: absolute;
  right: -1px;
  border: 1px solid #ccc;
}
.btn_reduce {
  top: 24px;
}
.shop {
  position: absolute;
  height: 46px;
  line-height: 46px;
  padding: 0 26px;
  font-size: 18px;
  font-weight: 700;
  background-color: #df3033;
  color: #fff;
  border: none;
  top: 0;
  cursor: pointer;
}

input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.el-button--default:focus,
.el-button--default:hover {
  /* background-color: #df3033; */
  border-color: #df3033;
  color: #000;
}
</style>